<template>
  <el-main>
    <el-button class="list-btn" type="primary" icon="el-icon-plus" @click="createItem" v-if="btnShow">创建</el-button>
    <el-table :data="tableData" :row-class-name="tableRowClassName" v-if="listShow">
      <el-table-column prop="num" label="序号"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column prop="time" label="评论时间"></el-table-column>
      <el-table-column prop="likes" label="点赞数"></el-table-column>
      <el-table-column prop="id" label="操作">
        <template slot-scope="scope">
          <el-button
            class="list-btn"
            type="success"
            @click="editItem(scope.$index,scope.row)"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button 
            class="list-btn"
            type="danger"
            @click="deleteItem(scope.$index,scope.row)"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form ref="form" :model="form" label-width="80px" v-if="editShow">
      <el-form-item label="内容">
        <el-input v-model="form.content"></el-input>
      </el-form-item>
      <el-form-item label="点赞数">
        <el-input v-model="form.likes"></el-input>
      </el-form-item>
      <el-form-item label="评论时间">
        <el-col :span="11">
          <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="form.time"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="歌曲">
        <el-select v-model="form.song" value-key="id" placeholder="请选择歌曲">
        <el-option label="无" :value="null" ></el-option>
          <el-option v-for="song in edit.songs" :key="song.id" :label="song.name" :value="song"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户">
        <el-select v-model="form.user" value-key="id" placeholder="请选择用户">
        <el-option label="无" :value="null" ></el-option>
          <el-option v-for="user in edit.users" :key="user.id" :label="user.username" :value="user"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评论">
        <el-select v-model="form.comment" value-key="id" placeholder="请选择评论">
        <el-option label="无" :value="null" ></el-option>
          <el-option v-for="comment in edit.comments" :key="comment.id" :label="comment.content" :value="comment"></el-option>
        </el-select>
      </el-form-item>
      

      <el-form-item>
        <el-button type="primary" @click="onSubmit" v-if="newShow==false">确定</el-button>
        <el-button type="primary" @click="add" v-else>确定</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  


  </el-main>
</template>

<script type="module">
var comments = [];
var formData = [];
var editData = [];
var delFlag = false;
module.exports = {
  data: function() {
    return {
      tableData: comments,
      editShow: false,
      listShow: true,
      newShow: false,
      btnShow: true,
      edit: editData,
      emptyForm: {
        id: "",
        content: "",
        time: "",
        likes: "",
        song: "",
        user: "",
        comment: "",
        comments: []
      },
      form: {
        id: "",
        content: "",
        time: "",
        likes: "",
        song: "",
        user: "",
        comment: "",
        comments: []
      }
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    gettable() {
      $.ajax({
        url: "/listAllComments",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          console.log(data)
          for (let i in data.comments) {
              comments[i] = {
                id: data.comments[i].id,
                num: i,
                content: data.comments[i].content,
                time: data.comments[i].time,
                likes: data.comments[i].likes
              };
          }
          console.log(comments)
        }
      });
    },
    deleteItem(item, index) {
      let id = '{"id": ' + index.id + "}";
      $.ajax({
        url: "/deleteComment",
        type: "post",
        data: JSON.parse(id),
        async: false,
        success(data) {
          if(data) {
            delFlag = true;
          } else {
            delFlag = false;
          } 
        }
      });
      if(delFlag) {
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
        setTimeout(function(){
          window.location.href = "/index?page=4";
        }, 1500);
      } else {
        this.$message.error('错误窝，删除失败');
      }
    },
    editItem(item, index) {
      this.newShow = false;
      this.listShow = false;
      this.editShow = true;
      this.btnShow = false;
      var id = '{"id": ' + index.id + "}";
      $.ajax({
        url: "/editComment",
        type: "get",
        dataType: "json",
        async: false,
        data: JSON.parse(id),
        success(data) {
          editData = {
              comment: data.comment,
              songs: data.songs,
              users: data.users,
              comments: data.comments,
          };
          formData = {
              id: data.comment.id,
              content: data.comment.content,
              time: data.comment.time,
              likes: data.comment.likes,
              song: data.comment.song,
              user: data.comment.user,
              comment: data.comment.comment,
              comments: [],
          };
        }
      });
      this.edit = editData;
      this.form = formData;
    },
    check(objs, obj) {
      for (let i in objs) {
        if (objs[i].id == obj.id) return true;
      }
      return false;
    },
    onSubmit() {
      $.ajax({
        url: "/updateComment",
        type: "post",
        contentType: "application/json",
        async: false,
        data: JSON.stringify(this.form),
        success(data) {
          window.location.href = "/index?page=4";
        }
      });
    },
    back() {
      this.listShow = true;
      this.editShow = false;
      this.btnShow = true;
      this.emptyForm = {
        id: "",
        content: "",
        time: "",
        likes: "",
        song: "",
        user: "",
        comment: "",
        comments: []
      };
    },
    createItem() {
      this.newShow = true;
      this.listShow = false;
      this.editShow = true;
      this.btnShow = false;
      $.ajax({
        url: "/newComment",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          editData = {
              songs: data.songs,
              users: data.users,
              comments: data.comments,
          };
        }
      });
      this.edit = editData;
      this.form = this.emptyForm;
    },
    add() {
      $.ajax({
        url: "/addComment",
        type: "post",
        contentType: "application/json",
        async: false,
        data: JSON.stringify(this.form),
        success(data) {
          window.location.href = "/index?page=4";
        }
      });
    }
  },
  mounted: function() {
    this.gettable();
  }
};
</script>